<template>
    <div>
         <headers></headers>
         <van-row>
             <van-col span="4">
              <left/>
            </van-col>
            <van-col span="20">
                <div style="position: absolute;top: 60px;left: 200px">
                  <p>帐号：<input type="text">&emsp;
                    姓名：<input type="text">&emsp;
                    手机号：<input type="text">&emsp;&emsp;
                      <van-button>查询</van-button>&emsp;
                      <van-button>重置</van-button>
                  </p >
                  <p>
                      <van-button icon="plus" type="primary" @click="showPopup">新增</van-button>&emsp;
                      <van-button>删除</van-button>&emsp;
                      <van-button>导入</van-button>&emsp;
                      <van-button>导出</van-button>&emsp;
                      <van-button>冻结</van-button>&emsp;
                      <van-button>解冻</van-button>&emsp;
                      <van-button>回收站</van-button>&emsp;
                  </p >
                  <table border="1" cellspacing="0" class="t1">
                      <tr>
                          <td>
                            <el-checkbox v-model="checked1"></el-checkbox>
                          </td>
                          <td>帐号</td>
                          <td>姓名</td>
                          <td>性别</td>
                          <td>手机号</td>
                          <td>邮箱</td>
                          <td>工号</td>
                          <td>装态</td>
                          <td>操作</td>
                      </tr>
                      <tr v-for="i in userslist" :key="i.id">
                          <td>
                            <el-checkbox v-model="checked1"></el-checkbox>
                          </td>
                          <td>{{i.username}}</td>
                          <td>{{i.name}}</td>
                          <td>{{i.gender}}</td>
                          <td>{{i.model}}</td>
                          <td>{{i.email}}</td>
                          <td>{{i.job_number}}</td>
                          <td>{{i.utype}}</td>
                          <td>
                            <span class="s1">编辑</span>
                            <span>|</span>
                            <span class="s1">
                                 <el-dropdown>
                                    <span class="s1">
                                    更多
                                    <el-icon class="el-icon--right">
                                        <arrow-down />
                                    </el-icon>
                                    </span>
                                    <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item>详情</el-dropdown-item>
                                        <el-dropdown-item>密码</el-dropdown-item>
                                        <el-dropdown-item>删除</el-dropdown-item>
                                        <el-dropdown-item>冻结</el-dropdown-item>
                                    </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </span>
                          </td>
                      </tr>
                  </table>
              </div>
            </van-col>
         </van-row>
    </div>
</template>

<script>
import headers from '../comm/headers.vue'
import left from '../comm/left.vue'
import axios from 'axios'
export default {
    components:{
        'headers':headers,
        'left':left,
    },
    data() {
        return {
           userslist:[],
           checked: true,
        }
    },
    methods: {
        getdapt(){
            axios({url:'http://localhost:5000/getuserlist',method:'get'}).then(res => {
                this.userslist = res.data.list
            })
        },
    },
    created() {
        this.getdapt()
    }
}
</script>

<style scoped>
.t1{
    width: 95%;
    height: 300%;
    text-align: center;
    border: 2px silver;
}
.v1{
    text-align: center;
}
.s1{
    color: cornflowerblue;
    size: 15;
}
</style>
